<template id='PresalePopup'>
  <div
    class="PresalePopup"
    v-if="popupInfo.isShow && popupInfo.seconds"
    :class="[
      { popupInfoShow: popupInfo.isShow },
      { popupInfoHidden: popupInfo.isClickBtn },
    ]"
  >
    <div class="animation1" v-if="!animation1Finished">
      <img
        :src="popupInfo.eggImg"
        class="eggImg"
        :class="[{ eggAnimation: popupInfo.isShow }]"
        @animationend="eggAnimationFinished"
        @webkitAnimationEnd="eggAnimationFinished"
      />
    </div>
    <div class="animation2" v-if="animation1Finished && !animation2Finished">
      <img :src="popupInfo.eggImg" class="eggImg eggAnimation2" />
      <img
        :src="lightImg"
        class="lightImg lightAnimation"
        @animationend="lightFinished"
        @webkitAnimationEnd="lightFinished"
      />
    </div>
    <div
      class="animation3"
      v-if="animation2Finished && !animation3Finished"
      ref="animation3"
    >
      <img
        :src="lightImg"
        class="lightImg"
        :class="{ lightAnimation2: animation2Finished }"
      />
      <img
        :src="popupInfo.resImg"
        class="resImg"
        :class="[
          { resImgAnimation: animation2Finished },
          { resPatent: popupInfo.type == 'patent' },
        ]"
      />
    </div>
    <div class="animation4" v-if="animation3Finished && !animation4Finished">
      <div
        class="contentBox"
        :class="[
          { contentBoxAnimation: animation2Finished },
          { closeContentAnimation: popupInfo.isClickBtn },
        ]"
        @animationend="contentBoxFinished"
        @webkitAnimationEnd="contentBoxFinished"
      >
        <div class="leftPath">
          <img
            :src="popupInfo.resImg"
            class="resultImg"
            :class="[{ resPatent: popupInfo.type == 'patent' }]"
          />
          <p class="number">{{ popupInfo.number }}</p>
        </div>
        <div class="rightPath" v-if="popupInfo.type == 'patent'">
          <div class="patent">
            <p class="resultDesc">{{ popupInfo.desc }}</p>
            <p class="highLine">
              {{ popupInfo.highLine }} :<span
                >{{ popupInfo.hours }}:{{ popupInfo.minutes }}:{{
                  popupInfo.seconds
                }}</span
              >
            </p>
          </div>
          <img :src="okBtn" class="okBtn" @click="closePopup" />
        </div>
        <div class="rightPath2" v-else>
          <p>{{ popupInfo.Level }}</p>
          <div class="attributeGroup">
            <div
              class="attributeItem"
              v-for="(item, index) in popupInfo.attributeList"
              :key="index"
            >
              <p class="attributeName">{{ item.name }}</p>
              <p class="attributeValue">{{ item.value }}</p>
            </div>
          </div>
          <p class="attributeDesc">{{ popupInfo.attributeDesc }}</p>
          <img :src="okBtn" class="okBtn" @click="closePopup" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PresalePopup",
  components: {},
  props: {
    popupInfo: {
      type: Object,
    },
  },
  data() {
    return {
      okBtn: require("@/assets/images/presale/okBtn.png"),
      lightImg: require("@/assets/images/presale/resLight.png"),
      isContentBoxFinished: false,
      animation1Finished: false,
      animation2Finished: false,
      animation3Finished: false,
      animation4Finished: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    eggAnimationFinished() {
      this.animation1Finished = true;
    },
    lightFinished() {
      this.animation2Finished = true;
    },
    closePopup() {
      this.popupInfo.isClickBtn = true;
    },
    contentBoxFinished() {
      if (this.popupInfo.isClickBtn) {
        this.reset();
        this.$emit("close");
      }
    },
    reset() {
      this.isContentBoxFinished = false;
      this.animation1Finished = false;
      this.animation2Finished = false;
      this.animation3Finished = false;
      this.animation4Finished = false;
    },
  },
  created() {},
  mounted() {
    document.addEventListener("click", (e) => {
      if (this.$refs.animation3) {
        this.animation3Finished = true;
      }
    });
  },
  beforeDestroy() {
    document.removeEventListener("click", (e) => {});
  },
};
</script>

<style lang='less' scoped>
@import url("../assets/css/animation.css");
.PresalePopup {
  user-select: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 999;
  .animation1 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .eggImg {
      width: 512px;
      height: 512px;
    }
    .eggAnimation {
      -webkit-animation: opacity0-10 1.2s cubic-bezier(0.39, 0.575, 0.565, 1)
        both;
      animation: opacity0-10 1.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
    }
  }
  .animation2 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .eggImg {
      width: 512px;
      height: 512px;
      position: absolute;
    }
    .eggAnimation2 {
      -webkit-animation: eggSmall 1s both;
      animation: eggSmall 1s both;
    }
    .lightImg {
      position: relative;
      z-index: 2;
      height: 1608px;
    }
    .lightAnimation {
      animation: light 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
      -webkit-animation: light 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
  }
  .animation3 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .lightImg {
      height: 1080px;
      position: absolute;
      // left: 384px;
      // overflow: hidden;
    }
    .lightAnimation {
      animation: opacity5-10 1.5s linear infinite;
      -webkit-animation: opacity5-10 1.5s linear infinite;
    }
    .resImg {
      width: 284px;
      height: 558px;
      z-index: 3;
      position: relative;
    }
    .resPatent {
      width: 221px;
      height: 238px;
    }
    .resImgAnimation {
      -webkit-animation: bounce-in-bck 1.5s both;
      animation: bounce-in-bck 1.5s both;
    }
    .lightAnimation2 {
      animation: opacity05-10 2.5s linear infinite;
      -webkit-animation: opacity05-10 2.5s linear infinite;
    }
  }
  .animation4 {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .contentBox {
      background-image: url("../assets/images/presale/popup_bg.png");
      background-size: 100% 100%;
      width: 1134px;
      height: 708px;
      display: flex;
      font-size: 24px;
      color: #ffffff;
      text-shadow: 0px 2px #0854bc;
      justify-content: space-between;
      .leftPath {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 90px;
        .resultImg {
          width: 203px;
          height: 398px;
          margin-bottom: 20px;
        }
        .resPatent {
          width: 221px;
          height: 238px;
        }
        .number {
          font-size: 32px;
        }
      }
      .rightPath {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-items: center;
        .patent {
          margin-top: 148px;
          margin-right: 60px;
          font-size: 36px;
          line-height: 1.2;
          .resultDesc {
            margin-bottom: 90px;
          }
          .highLine {
            color: #0cff12;
            span {
              margin-left: 15px;
            }
          }
        }
        .okBtn {
          cursor: pointer;
          width: 218px;
          height: 91px;
          margin: 160px auto 0 auto;
        }
      }
      .rightPath2 {
        font-size: 30px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-items: center;
        margin-top: 66px;
        margin-right: 27px;
        margin-bottom: 33px;
        .attributeGroup {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-top: 27px;
          flex-wrap: wrap;
          .attributeItem {
            width: 320px;
            margin-bottom: 26px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .attributeValue {
              width: 125px;
              height: 60px;
              background-color: rgba(0, 0, 0, 0.1);
              display: flex;
              align-items: center;
              padding-left: 15px;
            }
          }
        }
        .attributeDesc {
          margin-top: 50px;
          line-height: 1.2;
        }
        .okBtn {
          cursor: pointer;
          width: 218px;
          height: 91px;
          margin: 40px auto 0 auto;
        }
      }
    }
    .contentBoxAnimation {
      -webkit-animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
        both;
      animation: slide-in-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
    }
    .closeContentAnimation {
      -webkit-animation: slide-out-top 0.5s
        cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
      animation: slide-out-top 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
    }
  }
}
.popupInfoHidden {
  -webkit-animation: opacity10-0 1s ease-out both;
  animation: opacity10-0 1s ease-out both;
}
.popupInfoShow {
  -webkit-animation: opacity0-10 1s ease-out both;
  animation: opacity0-10 1s ease-out both;
}
@media screen and (max-width: 450px) {
  .PresalePopup {
    .animation4 {
      .contentBox {
        .leftPath {
          margin: 0 50px;
        }
      }
    }
  }
}
</style>